<template>
    <div class="wipedd">
    <!-- <el-card class="box-card">
    <div class="text item">
    {{clipsdata}}
    </div>
</el-card> -->
<div class="animate__animated animate__backInLeft">
  <el-time-picker
    :editable='false'
    v-model="values"
    @change="changetime"
    placeholder="播放任意时间点">
  </el-time-picker>
        <!-- <el-button @click="handrefreshlist" type="info">刷新当前列表</el-button> -->
        <!-- <el-button @click="backward" type="info">向后视频切换</el-button>
        <el-button @click="forward" type="info">向前视频切换</el-button> -->
        </div>
        <div>
        <el-button @click="handreduction" type="primary" plain>准备</el-button>
        <el-button @click="handckremote" type="danger" plain>录制</el-button>
        <el-button @click="handclick" type="success" plain>播放</el-button>
        <el-button @click="handstop" type="info" plain>暂停</el-button>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: 'videoplayerlist',
        data() {
            return {
                values: new Date(2021, 6, 23, 0, 0),
                ip: window.location.hostname,
                clips: 'clips get',
                clipsdata: '',
                play: true,
                stop: true,
                record: 'record',
                remotedata: '1',
                stopdata: '2',
                reductiondata: 'true',
                getTimes: new Date().getTime().toString(),
                datavalue: '',
                resdata: [],
                value: ''
            }
        },
        beforeMount() {
            axios.get('http://' + this.ip + ':4000/backenddata', {
                params: {
                    valuetrue: true
                }
            })
            axios.get('http://' + this.ip + ':9993')
        },
        mounted() {
            setTimeout(() => {
                this.get()
            }, 1000)
        },
        methods: {
            get() {
                axios.get('http://' + this.ip + ':4000/backenddata', {
                    params: {
                        valuetrue: true
                    }
                }).then((res) => {
                    this.resdata = Array.from(new Set(res.data))
                        // console.log(this.resdata)
                })
                axios.get('http://' + this.ip + ':9993')
            },
            handclick() {
                const that = this

                function getUserAccount() {
                    return axios.get('http://' + that.ip + ':4000/command', {
                        params: {
                            play: that.play
                        }
                    }).then((res) => {
                        if (res || res.data) {
                            that.datasting = false
                            that.$message({
                                message: '你好，设备正在播放',
                                type: 'success'
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                function getUserPermissions() {
                    return axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }
                axios.all([getUserAccount(), getUserPermissions()])
            },
            handstop() {
                const that = this

                function getUser() {
                    return axios.get('http://' + that.ip + ':4000/stop', {
                        params: {
                            stop: that.stop
                        }
                    }).then((res) => {
                        if (res || res.data) {
                            that.datasting = false
                            that.$message({
                                message: '你好，设备已暂停播放',
                                type: 'success'
                            })
                        }
                    }).catch((error) => {
                        that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                    })
                }

                function getUserPermi() {
                    return axios.get('http://' + that.ip + ':9993', {
                        params: {
                            getTime: that.getTimes
                        }
                    })
                }

                function getstopdata() {
                    return axios.get('http://' + that.ip + ':8000/stopdata', {
                        params: {
                            stopdata: that.stopdata
                        }
                    })
                }
                axios.all([getUser(), getUserPermi(), getstopdata()])
            },
            handckremote() {
                const that = this
                axios.get('http://' + that.ip + ':4000/record', {
                    params: {
                        record: that.record
                    }
                }).then((res) => {
                    // console.log(res)
                    if (res || res.data) {
                        that.datasting = true
                        that.$message({
                            message: '你好，设备正在录制中',
                            type: 'success'
                        })
                    }
                }).catch((error) => {
                    that.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                })
                axios.get('http://' + that.ip + ':9993', {
                    params: {
                        getTime: that.getTimes
                    }
                })
                axios.get('http://' + that.ip + ':8000/remotedata', {
                    params: {
                        remotedata: that.remotedata
                    }
                })
            },
            handreduction() {
                axios.get('http://' + this.ip + ':4000/reduction', {
                    params: {
                        reductiondata: this.reductiondata
                    }
                }).then((res) => {
                    // console.log(res)
                    if (res || res.data) {
                        this.$message({
                            message: '你好，设备返回原来时间成功',
                            type: 'success'
                        })
                    }
                }).catch((error) => {
                    this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
                })
                axios.get('http://' + this.ip + ':9993', {
                    params: {
                        getTime: this.getTimes
                    }
                })
            },
            changetime(val) {
                this.time = val
                const times = this.time.toString()
                const dataresdata = this.resdata
                for (let i = 0; i < dataresdata.length; i++) {
                    const indexdata = dataresdata[i].match(times.substring(16, 24))
                    if (indexdata != null) {
                        const indexlist = indexdata.input
                        const n = indexlist.indexOf(times.substring(16, 24))
                        const indexn = indexlist.slice(n - 20, n - 18)
                        if (isNaN(indexn)) {
                            this.datavalue = indexlist.slice(n - 19, n - 18)
                            this.$message({
                                message: `视频已切换到:${indexlist.slice(n - 17, n + 23)}`,
                                type: 'success'
                            })
                        } else {
                            this.datavalue = indexn
                            this.$message({
                                message: `视频已切换到:${indexlist.slice(n - 17, n + 23)}`,
                                type: 'success'
                            })
                        }
                    }
                }
                if (this.datavalue === '') {
                    this.$message({
                        message: '你好，当前选择的时间线不存在',
                        type: 'warning'
                    })
                }
                axios.get('http://' + this.ip + ':4000/dataclip', {
                    params: {
                        datavalue: this.datavalue
                    }
                })
                axios.get('http://' + this.ip + ':9993')
                this.values = new Date(2021, 6, 23, 0, 0)
            }
            // 控制Select选择器进行视频档次的切换
            // changeLocationValue (value) {
            //   axios.get('http://' + this.ip + ':5000/choicedata', {
            //     params: {
            //       value: value
            //     }
            //   }).then((res) => {
            //     if (res) {
            //       this.$message({
            //         message: '你好，已成功切换到剪辑视频',
            //         type: 'success'
            //       })
            //     } else {
            //       this.$message.error('错误')
            //     }
            //     console.log(res)
            //   })
            //   axios.get('http://' + this.ip + ':9993')
            //   value = ''
            // },
            // forward () {
            //   axios.get('http://' + this.ip + ':5000/forwarddata', {
            //     params: {
            //       forwar: '+1'
            //     }
            //   }).then((res) => {
            //     if (res || res.data) {
            //       this.$message({
            //         message: '你好，设备剪辑向前切换成功',
            //         type: 'success'
            //       })
            //     }
            //   }).catch((error) => {
            //     this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
            //   })
            //   axios.get('http://' + this.ip + ':9993')
            // },
            // backward () {
            //   axios.get('http://' + this.ip + ':5000/backwarddata', {
            //     params: {
            //       backward: '-1'
            //     }
            //   }).then((res) => {
            //     if (res || res.data) {
            //       this.$message({
            //         message: '你好，设备剪辑向后切换成功',
            //         type: 'success'
            //       })
            //     }
            //   }).catch((error) => {
            //     this.$message.error(`服务器连接失败，请检查后台是否开启${error}`)
            //   })
            //   axios.get('http://' + this.ip + ':9993')
            // },
            // handrefreshlist () {
            //   const that = this
            //   axios.get('http://' + that.ip + ':5000/interface', {
            //     params: {
            //       clips: that.clips
            //     }
            //   }).then((res) => {
            //     const stingdata = res.data
            //     that.clipsdata = stingdata.substring(30, 800)
            //     console.log(that.clipsdata)
            //     // console.log(res.data)
            //   })
            //   axios.get('http://' + that.ip + ':9993')
            // }
        }
    }
</script>
<style lang="scss" scoped>
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 400px !important;
    }
    
    .el-button--primary.is-plain[data-v-2a5915db] {
        width: 135px !important;
    }
    
    .el-button--primary.is-plain[data-v-2a5915db] {
        width: 135px !important;
    }
    
    .el-button--info {
        font-size: 16px;
    }
    
    .el-button--success.is-plain {
        color: #909399;
        font-size: 25px;
        width: 125px;
        height: 80px;
        background: #f4f4f5
    }
    
    .el-button--info.is-plain {
        color: #909399;
        font-size: 25px;
        width: 125px;
        height: 80px;
        background: #f4f4f5
    }
    
    .el-button--danger.is-plain {
        color: #909399;
        font-size: 25px;
        width: 125px;
        height: 80px;
        background: #f4f4f5
    }
    
    .el-button--primary.is-plain {
        color: #909399;
        font-size: 25px;
        width: 125px;
        height: 80px;
        background: #f4f4f5
    }
    
    .el-button+.el-button {
        margin-left: 3px;
    }
    
    .text {
        font-size: 14px;
    }
    
    .item {
        height: 400px;
        line-height: 80px;
    }
    
    .box-card {
        width: 500px;
    }
</style>